<!-- 文章列表、详情展示 -->
<template>
	<div class="list" ref="list" v-loading="loading">
		<div class="border-b">
			<div class="nav-left">
				<span>{{ $route.meta.title }}</span>
        <span v-if="!!contentData == true" class="back-btn" style="font-size: 20px !important;cursor: pointer;border-left: unset!important;" @click="onBackList">
<!--            <i	class="el-icon-back"></i>-->返回</span>
			</div>
		</div>
		<!--single-tab-->
		<div class="row" style="padding: 0 10px">
			<div class="col-lg-12">
				<template v-if="cardType == 'list'">
					<div class="list-view" v-if="!!contentData == false">
						<div class="course-text mt-10" v-for="(item, index) in trends" :key="index"
							@click="enterDetail(item)">
							<!-- 图文列表 -->
							<list_text_item :data="item"></list_text_item>
						</div>
					</div>
				</template>
				<template v-if="cardType == 'card'">
					<div class="d-flex flex-row flex-wrap book_list mt-30" v-if="!!contentData == false">
						<div class="bookshelf_item" v-for="book in trends" :key="book.colId" @click="enterDetail(book)">
							<img class="book_image" :src="book.colCoverImg" />
							<div class="mark_bg">点击阅读</div>
						</div>
					</div>
				</template>
				<div v-if="!!contentData == true" style="padding: 0 10px">

					<form>
						<div class="art-tit">
							<h3 class="text-center">{{ contentData.colTitle }}</h3>
						</div>
						<div class="art-info">
							<span v-if="contentData.colPublishUserName">作者: {{ contentData.colPublishUserName }}</span>
							<span>发布：{{ contentData.colDate }}</span>
							<span>阅读: {{ contentData.colReadCount }}</span>
						</div>
						<div v-if="contentData.colKind != 1">
							<div v-html="contentData.colContent" class="art-body"></div>
							<el-divider v-if="contentData.bizAttachList != null && contentData.bizAttachList.length > 0"
								content-position="left">附件下载</el-divider>
							<div class="file" v-for="item in contentData.bizAttachList" :key="item.cBizId"
								@click="checkFile(item)">
								{{ item.cFileName }}
							</div>
						</div>
						<div v-else>
							<!-- 展示图片列表 -->
							<div class="d-flex flex-column">
								<img class="image" :src="img.cFileUrl" v-for="img in contentData.bizAttachList"
									:key="img.cBizId" />
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>

		<div class="row align-items-center mt-30 mb-60 justify-content-center justify-content-sm-end"
			v-if="!!contentData == false">
			<el-pagination class="pagination" background @size-change="handleSizeChange"
				@current-change="handleCurrentChange" :current-page="pagination.pageNum" :page-sizes="pagination.pageSizes"
				:page-size="pagination.pageSize"
				:layout="screenWidth < 700 ? 'total, prev, pager, next' : pagination.layout" :total="pagination.total"
				prev-text="上一页" next-text="下一页">
			</el-pagination>
		</div>
	</div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb'
import reply from '@/components/reply'
import { getCode } from '@/utils/routeUtils.js'
import listTextItem from './components/list_text_item.vue'
import list_text_item from './components/list_text_item.vue'
import list_pic_item from './components/list_pic_item.vue'
export default {
	components: {
		breadcrumb,
		reply,
		listTextItem,
		list_text_item,
		list_pic_item,
	},
	data() {
		return {
			trends: [],
			query: {},
			pagination: {
				pageSize: 10,
				pageSizes: [10, 20, 30],
				layout: 'total, sizes, prev, pager, next, jumper',
				pageNum: 1,
			},
			contentData: null,
			colId: '',
			questionList: [],
			loading: false,
			cardType: 'list', //card, list  card时显示卡片样式， list时，显示列表
		}
	},
	computed: {
		screenWidth() {
			const width = this.$store.getters.screenWidth
			return width
		},
	},
	created() {
		this.query = this.$route.query
		console.log('list created', this.query)
		let colId = this.query.colId
		if (!colId) {
			colId = getCode(this.$store.getters.allMenus, this.$route.path).colId
		}
		this.colId = colId
		if (this.query.cardType) {
			this.cardType = this.query.cardType
		}
		if (this.query.type == 'detail') {
			this.enterDetail({
				colId: this.colId,
			})
		} else {
			this.getArticleList()
		}
	},
	methods: {
		reloadData(item) {
			this.pagination = {
				pageSize: 10,
				pageSizes: [10, 20, 30],
				pageNum: 1,
			}
			this.colId = item.colId
			this.getArticleList()
		},
		enterDetail(item) {
			this.$api.articletype
				.gettArticleGetInfo(item.colId)
				.then((res) => {
					const data = res.data
					if (data.code == 200) {
						this.contentData = data.data
					}
				})
				.catch(() => {
					this.$message({
						showClose: true,
						type: 'warning',
						message: '获取文章详情失败，请重试',
					})
				})
		},
		handleSizeChange(pageSize) {
			this.pagination.pageSize = pageSize
			this.getArticleList()
		},
		handleCurrentChange(pageNum) {
			this.pagination.pageNum = pageNum
			this.getArticleList()
		},
		getArticleList() {
			this.loading = true
			this.$api.articletype
				.getArticleLlist({
					articleType: this.colId,
					pageSize: this.pagination.pageSize,
					pageNum: this.pagination.pageNum,
					homeshow: '',
				})
				.then((res) => {
					const data = res.data
					if (data.code == 200) {
						this.trends = data.rows
						this.pagination.total = data.total
					}
				})
				.catch((error) => {
					console.log('getArticleList', error)
				})
				.finally(() => {
					this.loading = false
				})
		},
		// 返回列表
		onBackList() {
			if (!this.trends.length) {
				this.colId = this.contentData.colNavMenuId
				this.getArticleList()
			}
			this.contentData = null
		},
		checkFile(item) {
			window.open(item.cFileUrl)
		},
	},
}
</script>

<style lang="scss" scoped>
.bg-1 {
	background: rgba(0, 0, 0, 0) url('~@/assets/images/bg/nyban.jpg') repeat scroll center center / cover;
	height: 400px;
}

.list {
	height: 100%;
	padding-right: 50px;
}

.list-none {
	text-align: right;
}

.border-b {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
	/*border-bottom: 2px solid #529e2f;*/
	border-bottom: 2px solid $mainColor;

	span {
    font-size: 30px;
    color: $mainColor;
    font-weight: 550;
		/*border-left: 8px solid #529e2f;*/
		//border-left: 8px solid $mainColor;
		//padding-left: 10px;
	}
}

.course-text {
	cursor: pointer;
  font-family: 等线;
}

.art-tit {
	margin-top: 20px;

  h3{
    font-family: 等线;
    font-weight: 700;
  }
}

.art-info {
	color: #333;
	font-size: 16px;
	font-family: '等线';
	padding: 0;
	box-sizing: border-box;
	outline: none;
	background: #fff;
	text-align: center;
	margin: 40px 0;

	span {
		margin-right: 20px;
    font-family: '等线';
	}
}

.course-meta {
	// width: 30% !important;
}

.nav-left {
	display: flex;
  flex-shrink: 0;
  flex: 1;
	align-items: center;
  justify-content: space-between;

	.el-button {
		margin-left: 10px;
	}
  span {
    font-size: 30px;
    color: $mainColor;
    font-weight: 700;
    font-family: 等线;
  }
}

// 附件
.file {
	color: #409eff;
	font-size: 18px;
	text-decoration: underline;
	cursor: pointer;
}

.image {
	width: 100%;
	margin-bottom: 50px;
}

.back-btn {
	color: $mainColor;
	cursor: pointer;
}

.bookshelf_item {
	position: relative;
	cursor: pointer;
	margin: 0 38px 40px 0;
	width: 210px;
	height: 300px;

	.book_image {
		width: 100%;
		height: 100%;
        transition: transform 0.3s;
	}

	.mark_bg {
		position: absolute;
		right: 0;
		bottom: 0;
		overflow-wrap: break-word;
		color: white;
		font-size: 14px;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
		padding: 2px 8px;
		background-color: rgba(0, 0, 128, 0.7);
	}

	.book_image:hover {
		transform: scale(1.03);
	}
}

.bookshelf_item:nth-child(n + 6) {
	margin-bottom: 0;
}
</style>

<style lang="scss">
.el-pagination.is-background .el-pager li:not(.disabled).active {
	background: $mainColor !important;
}

.el-pagination.is-background {

	.btn-prev,
	.btn-next {
		padding: 0 10px;
	}
}
</style>
